<template>
    <!-- 用户表格展示角色信息 -->
    <el-table :data="rolePage.roles" style="width: 95%; margin: auto;">
        <!-- 添加复选框选项 -->
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" prop="rid" fixed />
        <el-table-column label="角色名称" prop="rname" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-tooltip class="box-item" effect="dark" content="编辑-未实现" placement="top-start">
                    <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.$index, scope.row)" />
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="删除-未实现" placement="top-start">
                    <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="修改角色关联的菜单" placement="top-start">
                    <el-button type="success" :icon="Setting" circle @click="updateRoleMenuBtn(scope.row)" />
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <!-- 修改指定用户角色信息 -->
        <el-dialog v-model="dialog.visable" title="更新角色关联菜单" width="30%" draggable>
            <!-- 
                属性: 
                    :data 表示属性控件显示数据(注意：数据要求是属性结构)
                    show-checkbox 表示属性结构节点可以操作
                    node-key="id"  表示唯一数值，建议使用 后端数据主键
                    :default-expanded-keys 表示设置默认展开节点
                    :default-checked-keys  设置默认选中数据  
                    props：  设置显示数据结构
            -->
            <el-tree ref="menuTree" :data="dialog.menus" show-checkbox node-key="mid"
                :default-checked-keys="dialog.defaultKeys" :props="defaultProps" />
            <el-button type="primary" :icon="Position" @click="updateRoleMenus()"
                style="margin-top:10px;margin-left: 280px;">更新菜单</el-button>
        </el-dialog>
    </div>
</template>
<script setup>
//1.引入ref和reactive
import { ref, reactive, onMounted } from 'vue';
import request from '../utils/request';
import { Delete, Edit, Plus, Position, Setting } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

//通过绑定到指定元素实例
const menuTree = ref();

//定义属性控件显示数据结构
const defaultProps = {
    children: 'children',
    label: 'mname',
}

//定义表格显示数据变量
const rolePage = reactive({
    roles: [],
})

//定义对话框变量
const dialog = reactive({
    visable: false,
    roleId: null,
    menus: [], //所有菜单数据
    defaultKeys: []
})

//更新指定角色菜单函数
const updateRoleMenus = async () => {
    //menuTree.value.getCheckedNodes()  获取所有被选中的节点 (中间状态的阶段未被获取)。返回集合
    //menuTree.value.getHalfCheckedNodes() 获取所有中间状态节点对象集合
    let treeMenus = menuTree.value.getCheckedNodes().concat(menuTree.value.getHalfCheckedNodes());
    //    let trees =  menuTree.value.getCheckedKeys().concat(menuTree.value.getHalfCheckedKeys());
    //发送请求，把数据传递给后端接口
    let res = await request.put(`/roles/updateMenusByRoleId/${dialog.roleId}`, treeMenus);
    if (res.data.success) {
        //显示提示信息
        ElMessage.success("更新菜单成功");
        //2.查询角色
        queryRoles();
        //关闭对话框
        dialog.visable = false;
    }
}

//显示更新角色关联菜单对话框
const updateRoleMenuBtn = async (role) => {



    dialog.defaultKeys = []; //清空数组
    //1.把当前role数据保存下
    dialog.roleId = role.rid;
    //查询所有菜单数据
    let res = await request.get("/menu/menus");
    if (res.data.success) {
        dialog.menus = res.data.data;
    }

    //设置默认选项
    //获取当前角色关联所有菜单
    let menus = role.menus;
    //遍历集合
    menus.map(m => { //遍历一节菜单数据

        m.children.map(subMenu => {

            //遍历二级菜单mid
            //把所有二级菜单保存到 defaultkeys集合中
            dialog.defaultKeys.push(subMenu.mid);
        })
    })
    //2.显示对话框
    dialog.visable = true;
}
//查询所有角色信息
const queryRoles = async () => {
    let res = await request.get("/roles/findAll");
    //    console.log(res.data);
    if (res.data.success) {
        //把后端响应数据赋值给rolePage.roles变量
        rolePage.roles = res.data.data;


    }
}
onMounted(() => {
    //调用查询角色信息函数
    queryRoles();
})

</script>